<!--
 * @Description: 缺陷分类新增或编辑
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-04-22 10:23:27
 * @LastEditors: Liu Zhiwang
-->
<template style="height: 80%">
  <div>
    <base-dialog
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @updateData="updateData"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :disabled="dialog.disabled"
        label-width="100px">
        <div class="tree-box">
          <div class="lineTree" style="height: calc(100% - 24px)">
            缺陷类型：
            <el-tree
              ref="tree"
              :data="categoryTreeList"
              node-key="id"
              icon-class="el-icon-arrow-right"
              :expand-on-click-node="false"
              :props="{ children: 'children', label: 'categoryName', value: 'id' }"
              @node-click="chooseDevice" />
          </div>
        </div>
        <div style="float:right;height: 100%;width: 75%;top: 10;">
          <div style="top: 10px;width: 98%">
            <p style="font-size: 150%;text-align:center">{{ this.dialog.form.itemValue }}关联配置</p>
          </div>
          <el-scrollbar style="height:100%">
            <div v-if="isReloadData" style="height: 450px">
              <template>
                <el-table
                  :data="this.dialog.form.typeList"
                  border
                  style="width: 100%">
                  <el-table-column width="105" label="选中关联" prop="ischeck">
                    <template slot-scope="scope">
                      <el-checkbox
                        v-model="scope.row.ischeck"
                        style="padding-left: 10px"
                        @change="checkChange(scope.row)" />
                    </template>
                  </el-table-column>>
                  <el-table-column
                    label="序号">
                    <template scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="categoryName"
                    label="缺陷类型名称" />
                  <el-table-column
                    prop="parentname"
                    label="上级类型" />
                </el-table>
              </template>

            </div>
          </el-scrollbar>
          <div class="page-box">
            <pagination
              :total="total"
              :page.sync="listQuery.page"
              :size.sync="listQuery.size"
              @pagination="getList" />
          </div>
        </div>
      </el-form>
    </base-dialog>
  </div>
</template>
<script>
import { getDefectCategory, getCategoryList } from '@/api/jcwwtk/categoryRectLevel'
export default {
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20
      },
      total: 0,
      // eslint-disable-next-line vue/no-dupe-keys
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {
          categoryTreeList: [], // 树
          states: [], // 状态数组
          producerList: [], // 厂家数组
          typeList: [], // 列表
          divceTypeList: [] // 固组数组
        }
      },
      categoryTreeList: [],
      states: [],
      producerList: [],
      typeList: [],
      ckeckedAll: false,
      isReloadData: true,
      divceTypeList: []
    }
  },
  computed: {},
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.getList()
        this.getListPage()
      }
    }
  },
  mounted() {},
  methods: {
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    getListPage() {
      getDefectCategory()
        .then((response) => {
          this.categoryTreeList = response.data
        })
        .catch((_) => {
        })
    },
    // 下拉数据获取
    getList() {
      this.listQuery.cId = this.dialog.form.dictionaryId
      getCategoryList(this.listQuery)
        .then((response) => {
          this.typeList = response.data.records
          this.dialog.form.typeList = response.data.records
          for (let i = 0; i < this.typeList.length; i++) {
            // eslint-disable-next-line eqeqeq
            if (this.typeList[i].ischeck == 'Y' || this.typeList[i].ischeck == '') {
              this.typeList[i].ischeck = true
              this.dialog.form.typeList[i].ischeck = true
            } else {
              this.typeList[i].ischeck = false
              this.dialog.form.typeList[i].ischeck = false
            }
          }
          this.total = response.data.total
          this.listQuery.size = response.data.size
          this.listQuery.pages = response.data.pages
          this.listQuery.id = ''
          this.$forceUpdate()
        })
        .catch((_) => {
        })
    },
    changeTableItem(row) {
      var tempData = this.dialog.form
      tempData.parentId = row.id
      tempData.parentName = row.categoryName
      tempData.defectLevelId = row.defectLevelId
      this.dialog.form = JSON.parse(JSON.stringify(tempData))
    },
    changeDefectLevel(e) { // 选择缺陷等级
      var tempData = this.dialog.form
      tempData.parentId = ''
      tempData.parentName = ''
      this.dialog.form = JSON.parse(JSON.stringify(tempData))
      this.getListPage()
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          this.$emit('updateData', this.dialog.form)
        }
      })
    },
    chooseDevice(item) {
      this.listQuery.id = item.id
      this.listQuery.cId = this.dialog.form.dictionaryId
      this.getList()
    },
    checkChange(row) {
    }
  }
}
</script>

<style scoped lang="scss">
  .tree-box{
    width:200px;
    border:1px;solid:#E7E7E7;
    height:100%;
  }

  .tree-box{
    height: 500px;width: 20%;float: left
  }

  .lineTree{
    overflow:auto;
    height:300px;
    margin:10px;

    .el-tree-node{
      .el-tree-node__children{
        overflow:visible !important;
      }
    }

    .page-box{
      top: -20%;
    }
  }
</style>
